<template>
  <div class="MuSic opacity-ling">
    <!-- 轮播图 -->
    <div class="carousel-div">
      <el-carousel
        :interval="5000"
        type="card"
        height="200px"
      >
        <el-carousel-item
          v-for="(item,index) in carouselUrlList"
          :key="index"
        >
          <img
            class="carousel-img"
            :src="item.imageUrl"
            alt="加载中..."
          >
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 推荐歌曲 -->
    <div class="personalized">
      <div class="per-title">
        <span class="text">推荐歌曲</span>
        <i
          class="el-icon-refresh"
          @click="refresh(1)"
        ></i>
      </div>
      <div class="per-list">
        <el-row :gutter="5">
          <el-col :span="3">
            <div class="grid-content">&emsp;</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content">
              歌曲
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content">
              发布时间
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content">
              歌手
            </div>
          </el-col>
        </el-row>
        <div
          class="loading"
          v-loading="loading"
        ></div>
        <div class="scrllo">
          <div
            class="per-item"
            v-for="(peritem,index) in personalizedList"
            :key="peritem.id"
          >
            <el-row
              :gutter="10"
              type='flex'
              align="middle"
              :class="{'per-box-inset': iscarousel === index}"
            >
              <el-col :span="3">
                <img
                  class="item-img"
                  :src="peritem.al.picUrl"
                  alt=""
                >
              </el-col>
              <el-col :span="4">
                <span class="item-text biao-ti">
                  {{peritem.al.name}}
                </span>
              </el-col>
              <el-col :span="4">
                <span class="item-text biao-ti">
                  {{formatDate(peritem.publishTime)}}
                </span>
              </el-col>
              <el-col :span="10">
                <span class="item-text biao-ti">
                  {{peritem.ar[0].name}}
                </span>
              </el-col>
              <el-col :span="1">
                <div
                  class="icon-caret"
                  @click="caretClick(0,index)"
                >
                  <i :class="iscarousel === index ? 'el-icon-video-pause pause-color' : 'el-icon-caret-right' "></i>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <!--   <div class="personalized">
      <div class="per-title">
        <span class="text">推荐新音乐</span>
        <i
          class="el-icon-refresh"
          @click="newsong()"
        ></i>
      </div>
      <div class="per-list">
        <el-row :gutter="5">
          <el-col :span="3">
            <div class="grid-content">&emsp;</div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content">
              歌曲
            </div>
          </el-col>
        </el-row>
        <div
          class="loading"
          v-loading="loading_newsong"
        ></div>
        <div class="scrllo">
          <div
            class="per-item"
            v-for="(sonitem,sonindex) in newsongList"
            :key="sonitem.id"
          >
            <el-row
              :gutter="10"
              type='flex'
              align="middle"
              :class="{'per-box-inset': ispersonal === sonindex}"
            >
              <el-col :span="3">
                <img
                  class="item-img"
                  :src="sonitem.picUrl"
                  alt=""
                >
              </el-col>
              <el-col :span="18">
                <span class="item-text biao-ti">
                  {{sonitem.name}}
                </span>
              </el-col>
              <el-col :span="1">
                <div
                  class="icon-caret"
                  @click="caretClick(1,sonindex)"
                >
                  <i :class="ispersonal === sonindex ? 'el-icon-video-pause pause-color' : 'el-icon-caret-right' "></i>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div> -->
    <!-- 底部音乐组件 -->
    <audio-module></audio-module>
    <!-- 侧边音乐列表 -->
    <audio-sidebar></audio-sidebar>
  </div>
</template>

<script>
import { dateNew, session, ranDomRange } from '@/common/utils'
import AudioModule from '@/components/MuSic/AudioModule.vue'
import { mapMutations } from 'vuex'
import AudioSidebar from '@/components/MuSic/AudioSidebar.vue'

export default {
  name: 'MuSic',
  components: {
    AudioModule,
    AudioSidebar,
  },
  data() {
    return {
      carouselUrlList: [],
      personalizedList: [],
      loading: false,
      iscarousel: '',
      ispersonal: '',
      newsongList: [],
      loading_newsong: false,
    }
  },
  created() {
    this.getHomepage()
  },
  watch: {
    // 监听vuex中的$store.state.audioIndex变化    简单写法
    '$store.state.audioIndex'(newValue, oldValue) {
      // 判断歌单中有没有这个歌曲
      const per = this.personalizedList[newValue].id
      const audioId = this.$store.state.audioId.id
      if (per == audioId) {
        this.iscarousel = newValue
      } else {
        this.iscarousel = ''
      }
    },
  },
  methods: {
    ...mapMutations(['getAudioobj', 'getisSongsNull']),
    // 获取轮播图、推荐歌单
    async getHomepage() {
      // 轮播图
      const { banners } = await this.$http.music.get('/banner', { type: 0 })
      this.carouselUrlList = banners
      // 歌单 30条
      const { result } = await this.$http.music.get('/personalized', { limit: 30 })
      // 存进sessionStorage
      session.set('result', result)
      // 获取推荐歌曲
      this.refresh(result)
    },
    // 歌单数据处理
    textchange(arr) {
      let list = []
      arr.slice(0, 10).forEach(element => {
        list.push(element.id)
      })
      return list.join()
    },
    // 获取推荐歌曲
    async refresh(result) {
      // 开启loading
      this.loading = true
      let detailId = ''
      // 判断是不是用户进行刷新
      if (result == 1) {
        // 获取sessionStorage中的数据
        const resultList = session.get('result')
        // 获取一个随机数，再拿到id
        detailId = ranDomRange(0, resultList.length)
        detailId = resultList[detailId].id
        // 手动刷新了  去除在页面上的播放样式
        this.iscarousel = ''
      } else {
        detailId = result[0].id
      }
      // 获取歌单数据
      const { playlist } = await this.$http.music.get('/playlist/detail', { id: detailId })
      // 歌单数据处理
      const playText = this.textchange(playlist.trackIds)
      // 获取歌单中的歌曲
      const { songs } = await this.$http.music.get('/song/detail', { ids: playText })
      // 更新data
      this.personalizedList = songs
      // 存进sessionStorage
      session.set('songs', songs)
      // 延时400毫秒关闭loading
      setTimeout(() => {
        this.loading = false
      }, 400)
      this.newsong()
    },
    // 点击播放
    caretClick(num, index) {
      if (num == 0) {
        this.iscarousel = index
        // 提交更新全局音乐
        this.getAudioobj(this.personalizedList[index])
        // 修改状态   更新播放列表
        this.getisSongsNull(true)
        session.set('songs', this.personalizedList)
      } else if (num == 1) {
        this.$message({
          message: '暂时不能播放',
          type: 'warning',
        })
      }
    },
    // 获取推荐新音乐
    async newsong() {
      // 开启loading
      this.loading_newsong = true
      let { result } = await this.$http.music.get('/personalized/newsong', { limit: 10 })
      this.newsongList = result
      // 延时400毫秒关闭loading
      setTimeout(() => {
        this.loading_newsong = false
      }, 400)
    },
    formatDate(val) {
      if (val == 0) return '------'
      const date = dateNew(val)
      return date.Y + '-' + date.m + '-' + date.d
    },
  },
}
</script>

<style lang="scss" scoped>
@mixin backColor-boxsw {
  background: #fff;
  // box-shadow: 0 1px 18px #ddd;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}

/* 定义滚动条样式 */
.MuSic::-webkit-scrollbar {
  width: 0;
}

.MuSic {
  width: 100%;
  height: calc(100vh - 9.2rem);
  @include scroll-scss;

  .carousel-div {
    @include backColor-boxsw;

    .carousel-img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
      box-shadow: 0px 0px 14px #fff;
    }
  }

  .personalized {
    @include backColor-boxsw;
    height: 430px;

    .per-title {
      width: 150px;
      text-align: center;
      margin-top: 5px;

      .text {
        margin-right: 20px;
        @include text-fons-color;
      }

      .el-icon-refresh {
        font-size: 19px;
      }
    }

    .per-list {
      position: relative;
      width: 98%;
      height: calc(100% - 58px);
      margin: 0 auto;

      .loading {
        position: absolute;
        width: 100%;
        height: 100%;
      }

      .el-row {
        padding-bottom: 10px;
      }

      .grid-content {
        @include text-fons-color;
        font-size: 14px;
      }

      /* 定义滚动条样式 */
      .scrllo::-webkit-scrollbar {
        width: 7px;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
      }

      .scrllo::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
        background-color: rgba(184, 184, 184, 0.5);
      }

      .scrllo {
        overflow-y: scroll;
        // height: calc(100% - 20px);
        height: 100%;
        position: relative;

        .per-box-inset {
          box-shadow: 0px -2px 4px #d7ebff inset;
        }

        .per-item {
          width: 100%;
          height: 64px;

          .el-row {
            height: 70px;
            border-bottom: 1px solid #f2f6fd;
            padding-bottom: 0;
            padding-top: 5px;
            margin-top: 5px;
          }

          .item-img {
            width: 60px;
            height: 60px;
            border-radius: 7px;
          }

          .item-text {
            @include text-fons-color;
            font-size: 12px;
            line-height: 64px;
          }
        }

        .icon-caret {
          height: 50px;
          line-height: 61px;

          .el-icon-caret-right {
            font-size: 26px;
          }

          .el-icon-video-pause {
            font-size: 22px;
          }

          .pause-color {
            color: #007fff;
          }
        }

        .biao-ti {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>